<template>
	<view class="container">
		<view class="header">
			<text class="title">学生作业记录</text>
		</view>
		<!-- 顶部时间选择 -->
		<view class="header-section">
			<view class="date-picker glass-card">
				<picker mode="date" :value="selectedDate" @change="dateChange">
					<view class="picker-content">
						<uni-icons type="calendar" size="20" color="#4a6cf7"></uni-icons>
						<text>{{selectedDate || '选择日期'}}</text>
						<uni-icons type="arrowdown" size="18" color="#666"></uni-icons>
					</view>
				</picker>
			</view>

			<!-- 学科筛选 -->
			<view class="subject-filter glass-card" v-if="subjects.length > 1">
				<view v-for="(subject, index) in ['全部', ...subjects]" :key="index" class="filter-item"
					:class="{active: currentSubject === (index === 0 ? '' : subject)}"
					@click="changeSubject(index === 0 ? '' : subject)">
					{{subject}}
				</view>
			</view>
		</view>

		<!-- 学生列表 -->
		<scroll-view scroll-y class="student-list" v-if="selectedDate">
			<view v-for="student in students" :key="student.userId" class="student-card glass-card">
				<!-- 学生基本信息 -->
				<view class="student-header">
					<image :src="student.aver || '/static/aver1.jpg'" class="avatar"></image>
					<view class="student-info">
						<text class="name">{{student.studentName}}</text>
						<text class="grade">{{student.grade}}</text>
					</view>
				</view>

				<!-- 学科分组轮播图 -->
				<view v-if="getFilteredHomework(student.userId).length > 0">
					<view v-for="(subject, index) in groupBySubject(getFilteredHomework(student.userId))" :key="index"
						class="subject-group">
						<text class="subject-title">{{subject.name}}</text>

						<!-- 学科作业轮播图 -->
						<swiper class="subject-swiper" :indicator-dots="subject.images.length > 1" :autoplay="true"
							:interval="3000">
							<swiper-item v-for="(img, imgIndex) in subject.images" :key="imgIndex">
								<view class="swiper-item">
									<image :src="img.url" class="swiper-image" mode="aspectFit"
										@click="previewImage(img.url, subject.images.map(i => i.url))" />
									<text class="hw-event">{{img.hwEvent}}</text>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>

				<view v-else class="empty-tip">
					<uni-icons type="info" size="24" color="#999"></uni-icons>
					<text>该日期无作业记录</text>
				</view>
			</view>
		</scroll-view>

		<!-- 加载动画 -->
		<view class="loading" v-if="loading">
			<view class="loading-spinner"></view>
			<text>加载中...</text>
		</view>
	</view>
</template>

<script>
	import {
		globalVariable
	} from '../../configMy.js';

	export default {
		data() {
			return {
				selectedDate: '', // 当前选中的日期(YYYY-MM-DD格式)
				students: [], // 学生列表
				homeworkData: {}, // 作业数据 {date: {studentId: [homeworkItems]}}
				loading: false, // 加载状态
				globalVariable,
				subjects: [], // 学科列表
				currentSubject: '', // 当前选中的学科
				teacher: {
					teacherId: 4 // 示例老师ID
				},
				grade: ""
			}
		},
		onLoad(option) {
			this.selectedDate = this.getTodayDate();
			this.grade = option.grade;
			this.fetchSubjects();
		},
		methods: {
			// 获取今天日期(YYYY-MM-DD格式)
			getTodayDate() {
				const today = new Date();
				const year = today.getFullYear();
				const month = String(today.getMonth() + 1).padStart(2, '0');
				const day = String(today.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},

			// 日期选择变化
			dateChange(e) {
				this.selectedDate = e.detail.value;
				this.fetchAllHomework();
			},

			// 获取学科列表
			fetchSubjects() {
				this.loading = true;
				uni.showLoading({
					title: '加载学科数据...'
				});
				uni.request({
					url: `${globalVariable}/getTeacherSubject?grade=${this.grade}&teacherId=${this.teacher.teacherId}`,
					success: (res) => {
						uni.hideLoading();
						if (res.data.status === 1) {
							this.subjects = res.data.data.map(item => item.subject);
							if (this.subjects.length > 0) {
								this.currentSubject = this.subjects.length === 1 ? this.subjects[0] : '';
								this.fetchStudents();
							}
						} else {
							uni.showToast({
								title: res.data.message || '获取学科列表失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						});
					}
				});
			},

			// 获取学生列表
			fetchStudents() {
				this.loading = true;
				uni.showLoading({
					title: '加载学生数据...'
				});

				uni.request({
					url: `${globalVariable}/getStudentsByGrade?grade=${this.grade}`,
					success: (res) => {
						uni.hideLoading();
						if (res.data.status === 1) {
							this.students = res.data.data;
							this.fetchAllHomework();
						} else {
							uni.showToast({
								title: res.data.message || '获取学生列表失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						});
					}
				});
			},

			// 获取所有学生的作业数据
			fetchAllHomework() {
				if (!this.selectedDate || this.students.length === 0) return;

				this.loading = true;
				uni.showLoading({
					title: '加载作业数据...'
				});

				// 为每个学生获取作业数据
				const promises = this.students.map(student => {
					return new Promise((resolve) => {
						uni.request({
							url: `${globalVariable}/getHomeWorkByStudentId`,
							data: {
								studentId: student.userId,
								dateTime: this.selectedDate
							},
							success: (res) => {
								if (res.data.status === 1) {
									// 初始化数据结构
									if (!this.homeworkData[this.selectedDate]) {
										this.$set(this.homeworkData, this.selectedDate, {});
									}

									// 存储学生作业数据
									this.$set(this.homeworkData[this.selectedDate], student
										.userId, res.data.data);
								}
								resolve();
							},
							fail: () => {
								resolve();
							}
						});
					});
				});

				Promise.all(promises).then(() => {
					uni.hideLoading();
					this.loading = false;
				});
			},

			// 获取筛选后的作业数据
			getFilteredHomework(studentId) {
				if (!this.homeworkData[this.selectedDate] || !this.homeworkData[this.selectedDate][studentId]) {
					return [];
				}

				if (!this.currentSubject) {
					return this.homeworkData[this.selectedDate][studentId];
				}

				return this.homeworkData[this.selectedDate][studentId].filter(
					hw => hw.hwType === this.currentSubject
				);
			},

			// 按学科分组作业
			groupBySubject(homeworks) {
				const groups = {};

				homeworks.forEach(hw => {
					if (!hw.hwPath) return;

					// 按学科分组
					if (!groups[hw.hwType]) {
						groups[hw.hwType] = {
							name: hw.hwType,
							images: []
						};
					}

					// 处理多张图片
					hw.hwPath.split(',').forEach(imgPath => {
						groups[hw.hwType].images.push({
							url: `${globalVariable}/getHomeWorkImage/${imgPath.trim()}`,
							hwEvent: hw.hwEvent
						});
					});
				});

				return Object.values(groups);
			},

			// 切换学科筛选
			changeSubject(subject) {
				this.currentSubject = subject;
			},

			// 预览图片
			previewImage(current, urls) {
				uni.previewImage({
					current: current,
					urls: urls
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		margin-bottom: 30rpx;
		text-align: center;

		.title {
			display: block;
			font-size: 40rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
		}

		.subtitle {
			display: block;
			font-size: 28rpx;
			color: #666;
		}
	}

	/* 背景渐变与毛玻璃效果 */
	.container {
		padding: 20rpx;
		min-height: 100vh;
		background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
		background-image:
			radial-gradient(circle at 10% 20%, rgba(255, 15, 51, 0.1) 0%, transparent 20%),
			radial-gradient(circle at 90% 80%, rgba(8, 255, 111, 0.1) 0%, transparent 20%);
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: -50%;
			left: -50%;
			right: -50%;
			bottom: -50%;
			filter: blur(20px);
			opacity: 0.6;
			z-index: -1;
		}
	}

	/* 毛玻璃卡片基础样式 */
	.glass-card {
		background: rgba(255, 255, 255, 0.7);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border-radius: 24rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
		border: 1px solid rgba(255, 255, 255, 0.4);
		transition: all 0.3s ease;
	}

	/* 顶部区域 */
	.header-section {
		margin-bottom: 30rpx;

		.date-picker {
			margin-bottom: 20rpx;
			padding: 20rpx;

			.picker-content {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				color: #333;

				uni-icons {
					margin: 0 10rpx;
				}
			}
		}

		.subject-filter {
			display: flex;
			padding: 15rpx;
			flex-wrap: wrap;

			.filter-item {
				padding: 10rpx 20rpx;
				margin: 5rpx;
				border-radius: 20rpx;
				background: rgba(255, 255, 255, 0.5);
				font-size: 26rpx;
				color: #666;
				transition: all 0.3s ease;

				&.active {
					background: #4a6cf7;
					color: white;
					transform: translateY(-3rpx);
					box-shadow: 0 4rpx 12rpx rgba(74, 108, 247, 0.3);
				}
			}
		}
	}

	/* 学生列表 */
	.student-list {
		height: calc(100vh - 240rpx);

		.student-card {
			margin-bottom: 30rpx;
			padding: 25rpx;

			.student-header {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.avatar {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					margin-right: 20rpx;
					border: 2rpx solid rgba(255, 255, 255, 0.8);
					box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
				}

				.student-info {
					display: flex;
					flex-direction: column;

					.name {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 5rpx;
					}

					.grade {
						font-size: 26rpx;
						color: #666;
					}
				}
			}

			.subject-group {
				margin-bottom: 25rpx;

				.subject-title {
					display: block;
					font-size: 28rpx;
					font-weight: bold;
					color: #4a6cf7;
					margin-bottom: 15rpx;
				}

				.subject-swiper {
					height: 400rpx;
					border-radius: 16rpx;
					overflow: hidden;
					box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

					.swiper-item {
						position: relative;
						height: 100%;
						width: 100%;

						.swiper-image {
							width: 100%;
							height: 100%;
							transition: transform 0.3s ease;

							&:active {
								transform: scale(0.98);
							}
						}

						.hw-event {
							position: absolute;
							left: 0;
							right: 0;
							bottom: 0;
							background: rgba(0, 0, 0, 0.6);
							color: white;
							padding: 15rpx;
							text-align: center;
							font-size: 26rpx;
							backdrop-filter: blur(10px);
						}
					}
				}
			}

			.empty-tip {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 30rpx 0;
				color: #999;
				font-size: 26rpx;

				uni-icons {
					margin-right: 10rpx;
				}
			}
		}
	}

	/* 加载动画 */
	.loading {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 0.8);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 100;

		.loading-spinner {
			width: 60rpx;
			height: 60rpx;
			border: 6rpx solid #f3f3f3;
			border-top: 6rpx solid #4a6cf7;
			border-radius: 50%;
			animation: spin 1s linear infinite;
			margin-bottom: 20rpx;
		}
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>